import React, { useRef, useState, useEffect } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import { UploadOutlined } from '@ant-design/icons';
import { Upload, Button, Space, Divider } from 'antd';

const ImageCropper = ({ imagesrc }) => {
    const cropperRef = useRef(null);
    const [imgsrc, setImgsrc] = useState(null); // 裁剪好的 imgsrc
    const [image, setImage] = useState(null); // 记录图片
    const [open, setOpen] = useState(true);

    useEffect(() => {
        console.log("Incoming imagesrc:", imagesrc); // 打印传入的 imagesrc
        if (imagesrc) {
            setImage(imagesrc); // 更新图片
        }
    }, [imagesrc]);

    const handleCrop = () => {
        const cropper = cropperRef.current?.cropper;
        if (cropper) {
            const croppedDataUrl = cropper.getCroppedCanvas().toDataURL();
            console.log("裁剪的base64编码", croppedDataUrl);
            setImgsrc(croppedDataUrl);
        }
    };

    const replaceImg = (info) => {
        const reader = new FileReader();
        reader.readAsDataURL(info.file.originFileObj);
        reader.onload = ({ target: { result } }) => {
            setImage(result);
        };
        return false;
    };

    const saveImage = () => {
        if (!imgsrc) {
            alert("请先裁剪图片！");
            return;
        }
        const link = document.createElement('a');
        link.href = imgsrc;
        link.download = 'cropped-image.png';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    return (
        open && (
            <div className='copy' style={{ width: '700px', height: '600px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                {image ? (
                    <Cropper
                        ref={cropperRef}
                        src={image}
                        style={{ height: '250px', width: '350px' }}
                        aspectRatio={16 / 9}
                    />
                ) : (
                    <div>正在加载图片...</div> // 图片未加载时的提示
                )}
                <div className='copy-but'>
                    <Space>
                        <Upload fileList={[]} onChange={replaceImg} accept="image/*">
                            <Button size='large' className="upload" icon={<UploadOutlined />}>
                                选择图片
                            </Button>
                        </Upload>
                        <Button size='large' className="button" type="primary" onClick={handleCrop}>
                            确定裁剪
                        </Button>
                    </Space>
                </div>
                <div className='copy-img'>
                    <Divider plain>裁剪好的图片</Divider>
                    <div style={{ minHeight: "200px", minWidth: "250px", border: "1px solid #ccc", display: "flex", justifyContent: "center", alignItems: "center" }}>
                        {imgsrc && <img src={imgsrc} alt="" />}
                    </div>
                    <Button type="primary" onClick={saveImage} style={{ marginTop: '20px' }}>
                        保存
                    </Button>
                </div>
            </div>
        )
    );
};

export default ImageCropper;